import React,{useState} from 'react'
import { Button,Toast } from 'antd-mobile'
import { login } from '../../api/Login.api'
import './Login.css'
import logo from '../../assets/imgs/logo.jpg'
import userPic from '../../assets/imgs/icon_user.png'
import pwdPic from '../../assets/imgs/icon_pwd.png'


export default function Login() {
const [userInfo,setUserInfo]=useState({acc:'',pwd:''})
// 非受控组件绑定
function accInput(e){
  setUserInfo({...userInfo,acc:e.target.value})
}
function pwdInput(e){
  setUserInfo({...userInfo,pwd:e.target.value})
}
// 用户登录
const userLogin=()=>{
 
  login(userInfo).then(res=>{
    let {code,msg}=res
    if(code==1){
      Toast.show({
        content:msg
      })
      window.location.hash="/home"
      
     
    }else{
      Toast.show({
        content:msg
      })
    }
  })
}

  return (
    <div className='login-wrapper'>
      <img src={logo} alt="pic" className='logo'/>
      <div className="accountBar bar">
        <input type="text" value={userInfo.acc} onChange={accInput} />
        <img src={userPic} alt="" />
      </div>
      <div className="passwordBar bar">
        <input type="password" value={userInfo.pwd} onChange={pwdInput} />
        <img src={pwdPic} alt="" />
      </div>
      <Button size='large' color='primary'  onClick={userLogin}>登陆</Button>
      <div className="tips">
        <span>前往注册</span>
        <span>忘记密码</span>
      </div>
    </div>
  )
}

